@mixin slide-motion($className, $keyframeName) {
  @include make-motion($className, $keyframeName);
  .#{$className}-enter-active, .#{$className}-appear {
    animation-timing-function: $ease-in-out;
    opacity: 0;
  }
  .#{$className}-leave-active {
    animation-timing-function: $ease-in-out;
  }
}

@include slide-motion(transition-drop, ivuTransitionDrop);
@include slide-motion(slide-up, ivuSlideUp);
@include slide-motion(slide-down, ivuSlideDown);
@include slide-motion(slide-left, ivuSlideLeft);
@include slide-motion(slide-right, ivuSlideRight);

@keyframes ivuTransitionDropIn {
  0% {
    opacity: 0;
    transform: scaleY(0.8);
  }

  100% {
    opacity: 1;
    transform: scaleY(1);
  }
}

@keyframes ivuTransitionDropOut {
  0% {
    opacity: 1;
    transform: scaleY(1);
  }

  100% {
    opacity: 0;
    transform: scaleY(0.8);
  }
}

@keyframes ivuSlideUpIn {
  0% {
    opacity: 0;
    transform: scaleY(0.8);
    transform-origin: 0% 0%;
  }

  100% {
    opacity: 1;
    transform: scaleY(1);
    transform-origin: 0% 0%;
  }
}

@keyframes ivuSlideUpOut {
  0% {
    opacity: 1;
    transform: scaleY(1);
    transform-origin: 0% 0%;
  }

  100% {
    opacity: 0;
    transform: scaleY(0.8);
    transform-origin: 0% 0%;
  }
}

@keyframes ivuSlideDownIn {
  0% {
    opacity: 0;
    transform: scaleY(0.8);
    transform-origin: 100% 100%;
  }

  100% {
    opacity: 1;
    transform: scaleY(1);
    transform-origin: 100% 100%;
  }
}

@keyframes ivuSlideDownOut {
  0% {
    opacity: 1;
    transform: scaleY(1);
    transform-origin: 100% 100%;
  }

  100% {
    opacity: 0;
    transform: scaleY(0.8);
    transform-origin: 100% 100%;
  }
}

@keyframes ivuSlideLeftIn {
  0% {
    opacity: 0;
    transform: scaleX(0.8);
    transform-origin: 0% 0%;
  }

  100% {
    opacity: 1;
    transform: scaleX(1);
    transform-origin: 0% 0%;
  }
}

@keyframes ivuSlideLeftOut {
  0% {
    opacity: 1;
    transform: scaleX(1);
    transform-origin: 0% 0%;
  }

  100% {
    opacity: 0;
    transform: scaleX(0.8);
    transform-origin: 0% 0%;
  }
}

@keyframes ivuSlideRightIn {
  0% {
    opacity: 0;
    transform: scaleX(0.8);
    transform-origin: 100% 0%;
  }

  100% {
    opacity: 1;
    transform: scaleX(1);
    transform-origin: 100% 0%;
  }
}

@keyframes ivuSlideRightOut {
  0% {
    opacity: 1;
    transform: scaleX(1);
    transform-origin: 100% 0%;
  }

  100% {
    opacity: 0;
    transform: scaleX(0.8);
    transform-origin: 100% 0%;
  }
}
